<!DOCTYPE html> 
<html style="overflow:hidden"> 
<head> 
	<meta charset="utf-8"> 
	<title>Canvas Photo Demo</title> 
		<style> 
		body 	{ font: 75% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; }
		canvas 	{ background-color: transparent; border: 1px solid gray; top: 0; left: 0; position: absolute;}
		canvas.resize-ne { cursor: ne-resize; }
		canvas.resize-se { cursor: se-resize; }
		canvas.resize-sw { cursor: sw-resize; }
		canvas.resize-nw { cursor: nw-resize; }
		canvas.move { cursor: move; }
		canvas.default { cursor: default; }
		img 	{ display: block; visibility: hidden; position: absolute; top: -1000; left: -1000; }
		input 	{ margin-left: 20px; }
		fieldset { width: 280px; float: left; }
		.fieldset { width: 200px; float: left; }
		#ft 	{ background-color: #eee; height: 70px; width: 99%; border-top: 1px solid #ccc; padding: 5px; position: absolute; top: 0; left: 0; }
		#ft span { width: 100%; }
		</style> 
	<script src="utilities.js" type="text/javascript" charset="utf-8"></script> 
	<script src="canvasElement.js" type="text/javascript" charset="utf-8"></script> 
	<script src="canvasImg.js" type="text/javascript" charset="utf-8"></script> 
	<script> 
		var CanvasDemo = function() {
			var YD = YAHOO.util.Dom;
			var YE = YAHOO.util.Event;
			var canvas1;
			var img = [];
			return {
				init: function() {
					canvas1 = new Canvas.Element();
					canvas1.init('canvid1',  { width: YD.getViewportWidth() - 5, height: YD.getViewportHeight() - 5 });			
					img[img.length] = new Canvas.Img('img1', {});
					img[img.length] = new Canvas.Img('img2', {});
					img[img.length] = new Canvas.Img('img3', {});
					img[img.length] = new Canvas.Img('bg', {});
					
					// @param array of images ToDo: individual images
					canvas1.setCanvasBackground(img[3]);
					canvas1.addImage(img[0]);
					canvas1.addImage(img[1]);
					canvas1.addImage(img[2]);
					
					this.initEvents();
				},
				initEvents: function() {
					YE.on('togglebg','click', this.toggleBg, this, true);
					YE.on('showcorners','click', this.showCorners, this, true);
					YE.on('togglenone','click', this.toggleNone, this, true);
					YE.on('toggleborders','click', this.toggleBorders, this, true);
					YE.on('togglepolaroid','click', this.togglePolaroid, this, true);
          			YE.on('pngbutton','click', function() { this.convertTo('png') }, this, true);
          			YE.on('jpegbutton','click', function() { this.convertTo('jpeg') }, this, true);
				},
				switchBg: function() {
					canvas1.fillBackground = (canvas1.fillBackground) ? false : true;							
					canvas1.renderAll();
				},
				
				//! insert these functions to the library. No access to _aImages should be done from here
				showCorners: function() {
					this.cornersvisible = (this.cornersvisible) ? false : true;
					for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) {
						canvas1._aImages[i].setCornersVisibility(this.cornersvisible);
					}
					canvas1.renderAll();
				},
				toggleNone: function() {
					for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) {
						canvas1._aImages[i].setBorderVisibility(false);
					}
					canvas1.renderAll();
				},
				toggleBorders: function() {
					for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) {
						canvas1._aImages[i].setBorderVisibility(true);
					}
					canvas1.renderAll();
				},
				togglePolaroid: function() {
					for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) {
						canvas1._aImages[i].setPolaroidVisibility(true);
					}
					canvas1.renderAll();
				},
				convertTo: function(format) {
					var imgData = canvas1.canvasTo(format);
					window.open(imgData, "_blank");
				},
				whatever: function(e, o) {
					// console.log(e);
					// console.log(o);
				}
			}
		}();
		
		
		
		
		YAHOO.util.Event.on(window, 'load', CanvasDemo.init, CanvasDemo, true);
	</script> 
</head> 
<body id="canvasdemo"> 
	<canvas id="canvid1"></canvas> 
	
	<img id="img1" src="7.jpg" /> 
	<img id="img2" src="8.jpg" /> 
	<img id="img3" src="9.jpg" /> 
	<img id="bg" src="bg.jpg" /> 
	
	<div id="ft"> 
		<div class="fieldset">
			<input type="button" id="jpegbutton" value="导出为JPEG" />
			<input type="button" id="pngbutton" value="导出为PNG (文件较大)" />
		</div>	  
		<fieldset> 
			<legend>照片边框</legend> 
			<span><input type="radio" name="some_name" value="" id="togglenone" /> <label for="togglenone">无</label></span> 
			<span><input type="radio" name="some_name" value="" id="toggleborders" /> <label for="toggleborders">简单</label></span> 
			<span><input type="radio" name="some_name" value="" id="togglepolaroid" /> <label for="togglepolaroid">拍立得&trade;</label></span> 
		</fieldset> 
		<span><input type="checkbox" name="some_name" value="" id="showcorners" /> <label for="showcorners">显示边角</label></span> 
	</div> 
 
</body> 

</html>